<template>
	<view class="uniFoot" :style="{'background':$store.state.footbg}">
		<view class="navigator" @tap="hover(0,'/')" :class="{'hover':$store.state.foothover['id']==0}" :style="{color:$store.state.foothover['color']}">
			<!-- <image src="" mode=""></image> -->
			<uni-text data-v-0bf90c00="" data-v-25aa4a88="" :style="{'color':$store.state.footcolor}" class="uni-icons" style=" font-size: 18px;"><span></span></uni-text>
			<br><text :style="{'color':$store.state.footcolor}">首页</text>
		</view>
		<view class="navigator" @tap="hover(1,'/pages/index/index')" :class="{'hover':$store.state.foothover['id']==1}" :style="{color:$store.state.foothover['color']}">
			<uni-text data-v-0bf90c00="" data-v-25aa4a88="" :style="{'color':$store.state.footcolor}" class="uni-icons" style="font-size: 18px;"><span></span></uni-text>
			<br><text :style="{'color':$store.state.footcolor}">关于</text>
		</view>
		<view class="navigator" @tap="hover(2,'/pages/center/center')" :class="{'hover':$store.state.foothover['id']==2}" :style="{color:$store.state.foothover['color']}">
			<uni-text data-v-0bf90c00="" data-v-25aa4a88="" :style="{'color':$store.state.footcolor}" class="uni-icons" style="font-size: 18px;"><span></span></uni-text>
			<br><text :style="{'color':$store.state.footcolor}">详情</text>
		</view>
		
		<view class="navigator" @tap="hover(3,'/pages/center/center')" :class="{'hover':$store.state.foothover['id']==3}" :style="{color:$store.state.foothover['color']}">
			<uni-text data-v-0bf90c00="" data-v-25aa4a88="" :style="{'color':$store.state.footcolor}" class="uni-icons" style="font-size: 18px;"><span></span></uni-text>
			<br>
			<text :style="{'color':$store.state.footcolor}">个人中心</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// hoverid:this.$store.state.foothover['id']
			}
		},
		props:['navbg','navcolor','footbg','footcolor'],
		methods: {
			hover(id,url){
				this.$store.state.foothover['id'] = id;
				uni.navigateTo({
				    url: url,
				    animationType: 'slide-in-right',
				    animationDuration: 200
				});
			}
		},
		computed:{
		}
	}
</script>

<style scoped>
	.uniFoot{
		display: flex;
		position: fixed;
		z-index: 100;
		bottom: 0;
		left: 0;
		height: 50px;
		/* background: #000; */
		width: 100%;
		flex-direction: row;
	}
	.uniFoot>*{
		flex: 1;
		text-align: center;
	}
	uni-text{color: #fff;font-size: 14px;}
	
	uni-image{width:22px;height: 22px;display: block;margin: auto;}
	.navigator.hover uni-text{color: inherit !important;}
</style>
